<template>
  <a-card :bordered="false">
    <a-row :gutter="8">
      <a-col :span="24">
        <div>
          <div class="org-table-operations">
            <a-button type="primary" icon="plus" @click="handlePersonAdd()">添加人员</a-button>
          </div>
          <a-table
            :columns="columns"
            :rowKey="record => record.rop.pid"
            :dataSource="orgMembersData"
            :pagination="paginations"
            @change="onChange"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handlePersonAccentManager(record)">账号管理</a>
                <a-divider type="vertical" />
                <a @click="handlePersonManager(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="handleOrgPersonRemove(record)">移除</a>
              </template>
            </span>
          </a-table>
        </div>
      </a-col>
    </a-row>
    <person-modal ref="personModal" @ok="handlePersonModalSaveOk" @close="handlePersonModalCancel" />
    <account-modal ref="AccountModal" />
  </a-card>
</template>

<script>
import PersonModal from './PersonModal'
import { getOrgMembersCountByOrgPid, getOrgMembersByOrgPid, delOrgMember } from './person'
import AccountModal from '../department/modules/AccountModal'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

export default {
  name: 'OrgMembers',
  components: {
    // STable,
    // STree,
    AccountModal,
    PersonModal
  },
  data () {
    return {
      // 中文
      locale: zhCN,
      // 表头
      columns: [
        {
          title: '工号',
          dataIndex: 'rop.empno'
          // sorter: true
        },
        {
          title: '姓名',
          dataIndex: 'person.personName'
          // sorter: true
          // needTotal: true,
          // customRender: (text) => text + ' 次'
        },
        {
          title: '性别',
          dataIndex: 'person.personsex',
          customRender: function (text) {
            if (text === '1') {
              return '男'
            } else if (text === '0') {
              return '女'
            } else {
              return text
            }
          }
        },
        {
          title: '出生日期',
          dataIndex: 'person.personBirthday'
        },
        {
          title: '联系电话',
          dataIndex: 'person.personMobile'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 单位列表数据
      orgMembersData: [],
      paginations: {
        showSizeChanger: true,
        showQuickJumper: true,
        // defaultCurrent: 1,
        current: 1,
        total: 0,
        pageSize: 10
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  created () {
    // this.fetch()
  },
  mounted () {
    this.getOrgMemberDatas()
  },
  methods: {
    getOrgMemberDatas (params = { orgPid: '*' }) {
      this.loading = true
      const headers = {
        'authOption': '1'
      }
      const param = {
        currentPage: this.paginations.current,
        pageSize: this.paginations.pageSize
      }
      getOrgMembersByOrgPid(headers, param.pageSize, param.currentPage)
        .then(res => {
          this.orgMembersData = res.data
          this.loading = false
        })
      getOrgMembersCountByOrgPid(headers)
        .then(res => {
          this.paginations.total = res.data
          this.paginations.showTotal = this.showTotal
          this.loading = false
        })
    },
    handleClick (e) {
      this.queryParam = {
        key: e.key
      }
      this.$refs.table.refresh(true)
    },
    // handleAdd (item) {
    //   this.$message.info(`提示：你点了 ${item.key} - ${item.title} `)
    //   this.$refs.modal.add(item.key)
    // },
    handleTitleClick (item) {
      console.log('handleTitleClick', item)
    },
    titleClick (e) {
      console.log('titleClick', e)
    },
    // 新增人员
    handlePersonAdd () {
      // console.log('handleOrdAdddddddddddddddddddd')
      this.$refs.personModal.showAddModal()
      // this.$refs.modal.theOrgPid = ''
      // this.$refs.modal.visible = true
    },
    // 账号管理
    handlePersonAccentManager (record) {
      this.$refs.AccountModal.showModal(record.person.pid)
    },
    // 编辑人员信息按钮
    handlePersonManager (record) {
      this.$refs.personModal.showEditModal(record.person.pid, record.rop.sysSeq, record.rop.pid, record.rop.empno)
    },
    // 单位移除人员按钮
    handleOrgPersonRemove (record) {
      const _this = this
      if (record.rop.sysSeq) {
        let personName = ''
        if (record.person && record.person.personName) {
          personName = record.person.personName
        }
        _this.$confirm({
          title: '确定移除?',
          content: '该操作将人员 ' + personName + ' 从单位移除',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          // onCancel () {
          // }
          onOk () {
            delOrgMember(record.rop, {})
              .then(res => {
                if (res.code === 'C1') {
                  _this.$message.success('已从单位移除', 3)
                  _this.getOrgMemberDatas()
                  // console.log(this.treeData)
                }
              })
          }
        })
      }
    },
    // 总条数
    showTotal (total) {
      return `共 ${total} 条`
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 翻页等
    onChange (params) {
      this.paginations.current = params.current
      this.paginations.pageSize = params.pageSize
      this.getOrgMemberDatas()
    },
    // 编辑框ok
    handlePersonModalSaveOk () {
      // console.log('handleOrgModalSaveOkccccccccccccccccc')
      this.getOrgMemberDatas()
    },
    // 编辑框ok
    handlePersonModalCancel () {
      // console.log('handleOrgModalCancelccccccccccccccccc')
    }
  }
}
</script>

<style lang="less">
  .org-table-operations {
    margin-bottom: 16px;
  }
  .org-table-operations > button {
    margin-right: 8px;
  }
  .custom-tree {

    /deep/ .ant-menu-item-group-title {
      position: relative;
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
</style>
